<% layout('layout/layout') %>
<% block('header').append(`<style>
.shop_cart_wrap {
    width:100%;
    height:600px;
    border:1px solid #e3e3e3;
    background:#FFF;
}
.no_cart {
    padding-top:120px;
    text-align:center;
       color: #989898;
}
.no_cart .icon-cart {
    font-size:46px;
    color: #989898;
}
.section_no_padding {
padding:0;
margin-bottom:20px;
}
.section_title {
    background:#f5f5f5;
    border-bottom:1px solid #e5e5e5;
    height:42px;
    line-height:42px;
    padding-left:20px;
    font-size:14px;
}
.section_footer {
    background:#f5f5f5;
    border-top:1px solid #e5e5e5;
    height: 49px;
    line-height: 44px;
    padding-left:20px;
    font-size:16px;
}
.order_item + .order_item {
    border-top:1px dashed #e3e3e3;
}
.del_link {
    position: absolute;
    right: 0;
    padding-right: 10px;
    color: #656565;
}
</style>`) %>
<div class="container">
    <div class="row">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active"><%= title %></li>
    </ol>
    </div>
    <div class="row">
        <% if(!user){ %>
            <div class="shop_cart_wrap">
                <div class="no_cart">
                    <i class="iconfont icon-cart"></i>
                    <p class="fs14">你还没有添加任何商品哦</p>
                    <a href="/login" class="btn btn-default">立即登录</a>
                    <a href="/" class="btn btn-primary">去逛逛</a>
                </div>
            </div>
        <% } else { %>
        <div id="emptyCart"  class="<%=user.cart.length>0?'hide_div':'' %> shop_cart_wrap">
            <div class="no_cart">
                <i class="iconfont icon-cart"></i>
                <p class="fs14">你还没有添加任何商品哦</p>
                <a href="/" class="btn btn-primary">去逛逛</a>
            </div>
        </div>
        <div id="fullCart" class="<%=user.cart.length===0?'hide_div':'' %> section section_no_padding" >
            <div class="section_title" >
                <div class="col-xs-4 col-md-4">商品信息</div>
                <div class="col-xs-2 col-md-2 text-center">单价</div>
                <div class="col-xs-2 col-md-2  text-center">数量</div>
                <div class="col-xs-2 col-md-2  text-center">小计</div>
                <div class="col-xs-2 col-md-2 text-center">实付</div>
            </div>
            <div id="cartWrap" class="padding15-h ">
              <% carts.forEach(function(item){ %>
                <div class="row fs16 padding-v order_item" data-cart-id="<%=item._id%>" data-id="<%=item.goodsId%>" data-check="<%=item.isCheck %>" data-num="<%=item.goodsNum %>" data-price="<%=item.price %>">
                    <div class="col-xs-4  col-md-4">
                        <div class="row">
                            <div class="col-md-2 col-xs-2"><input class="check_item" type="checkbox" <%=item.isCheck?'checked':'' %> value="<%item._id%>"></div>
                            <div class="col-md-4 col-xs-4 no-padding" >
                                <img src="<%=item.imgUrl%>" style="width:100px;height:100px;" >
                            </div>
                            <div class="col-md-6  col-xs-6">
                                <p class="fs16"><%=item.goodsName %></p>
                                <p class="text-muted"></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2 col-md-2  text-center ">￥<%=item.price %></div>
                    <div class="col-xs-2 col-md-2  text-center">
                        <div class="spinner" >
                            <input name="num" style="width:55px;" type="text" value="<%=item.goodsNum %>" >
                        </div>
                    </div>
                    <div class="col-xs-2 col-md-2  text-center">￥<span class="sub_total"><%=item.subTotal %></span></div>
                    <div class="col-xs-2 col-md-2  text-center relative">
                        ￥<span class="pay_total"><%=item.payTotal %></span>
                        <a class="del_link" href="javascript:void(0)"><i class="iconfont icon-delete"></i></a>
                    </div>
                </div>
              <% }) %>
            </div>
            <div class="section_footer" >
                <div class="col-xs-4 col-md-4" style="padding-left:0;">
                    <label><input id="checkAll" type="checkbox" name="checkAll"  value=""> 全选</label>
                    <a id="clearCart" class="normal_link "  href="javascript:void(0)" style="padding-left:25px;color:#989898;">清空购物车</a>
                </div>
                <div class="col-xs-6 col-md-6 text-right">
                    <span class="padding-right fs16" style="color:#989898;">商品合计：￥<span id="goodsTotal" class="goods_total"><%=total %></span></span>
                    <span class="fs16">
                        <strong>应付总额：</strong>
                        <span class="text-danger fs22">￥<span id="needTotal" ><%=total %></span></span><span class="fs12 text-muted">[不含运费]</span>

                    </span>
                </div>
                <div class="col-xs-2 col-md-2" style="padding-right:0;">
                    <form id="form" action="/order/index" method="post" novalidate>
                        <input type="hidden" name="status" value="cart">
                        <input type="hidden" name="carts" value="">
                        <input type="hidden" name="totalPrice" value="">
                    </form>
                    <button id="confirmCart" class="btn btn-primary btn-lg btn-block" style="height: 48px;">下单</button>
                </div>
            </div>
        </div>
        <% } %>
    </div>
</div>
<% block('footer').append(`<script src="/js/spinner.js?v=0811" ></script>`); %>
<% block('footer').append(`<script id="tpl">

</script>`) %>
<% block('footer').append(`<script>
jQuery(function(){
    var page =(function () {
		var carts = ${JSON.stringify(carts)}
		var $cartWrap = $('#cartWrap')
		var $spinner = $(".spinner")
		var $checkAll = $('#checkAll')
		var $goodsTotal = $('#goodsTotal')
		var $needTotal = $('#needTotal')
		var $clearCart = $('#clearCart')
		var $emptyCart = $('#emptyCart')
		var $fullCart = $('#fullCart')
		var $confirmCart = $('#confirmCart')
		var $form = $('#form')
		return {
			init:function () {
				this.bind()
				this.renderAll(this.setAllData())
			},
			bind:function () {
				var that = this
        $spinner.Spinner({
          callback:function(num) {
            var $item = this.closest('.order_item')
            $item.data('num',num)
            console.log('set', num)
            $.post('/cart/changeCartNum',{id:$item.data('cartId'),num:num})
            that.renderAll(that.setAllData())
            that.renderOne($item)
          }
        });

        $cartWrap.on('change', '.check_item', function(){
          var $this = $(this)
          var $item = $this.closest('.order_item')
            $item.data('check',$this.prop('checked'))
            $.post('/cart/changeCartCheck', {id:$item.data('cartId'),check:$this.prop('checked')})
            that.renderAll(that.setAllData())
        })
        $cartWrap.on('click', '.del_link',function () {
        	var $this = $(this)
        	var $item = $this.closest('.order_item')
        	$item.data('cartId')
        	$.post('/cart/removeOne/'+ $item.data('cartId')).done(function() {
                $item.remove();
                that.renderAll(that.setAllData())
        	})
        })
        $clearCart.on('click', function() {
           $.confirm('你确定要清空购物车么',function(res){
              if (res) {
                $.post('/cart/clear').done(function(){
                  $cartWrap.empty()
                  that.renderAll(that.setAllData())
                })
              }
           })
        })
        $checkAll.on('change', function () {
          var $this = $(this)
          console.log($this)
          if ($this.prop('checked')) {
            console.log('toCheck')
            $cartWrap.find('.check_item').prop('checked',true)
            $cartWrap.find('.order_item').data('check',true)

          } else {
            $cartWrap.find('.check_item').prop('checked', false)
            $cartWrap.find('.order_item').data('check', false)
          }
          $.post('/cart/checkAll',{check:$this.prop('checked')})
          that.renderAll(that.setAllData())
        })
        $confirmCart.on('click',function () {
          var obj = that.setAllData()
          if (obj.checkNum === 0 ) {
          	return $.Toast('你还没有选择要购买的商品', 'warning')
          }
          $form.find('input[name=carts]').val(JSON.stringify(obj.carts))
          $form.find('input[name=totalPrice]').val(obj.totalPrice)
          console.log(JSON.stringify(obj.carts),'------------------------')
          $form.submit()
        })
        },
        renderOne: function ($item) {
            var num = $item.data('num')
            var price = $item.data('price')
            $item.find('.sub_total').text($.formatFloat(num*price))
            $item.find('.pay_total').text($.formatFloat(num*price))
        },
        setAllData:function () {
            var obj = {
                isAllCheck:false,
                totalPrice:0,
            }
            var $orderItem = $cartWrap.find('.order_item')
            var len = $orderItem.length
            var checkNum = 0
            var totalPrice = 0
            var cartNum = 0
            var checkCarts = []
                    $orderItem.each(function(index,item){
                var $this = $(this)
                console.log($this)
                var id = $this.data('id')
                var num = $this.data('num')
                var price = $this.data('price')
                var isCheck = $this.data('check')
                cartNum += parseInt(num)
                if(isCheck) {
                    checkNum++
                    checkCarts.push({
                        id:id,
                        num:num,
                        price:price,
                        subTotal:$.formatFloat(parseInt(num) * parseFloat(price)),
                        payTotal:$.formatFloat(parseInt(num) * parseFloat(price))
                    })
                    totalPrice += parseInt(num) * parseFloat(price)
                }
            })
            obj.carts = checkCarts // 选中的商品信息
            obj.len = len // 商品的种类数量
            obj.allNum = cartNum // 商品的总数量
            obj.checkNum = checkNum //选中商品的总数
            obj.totalPrice = $.formatFloat(totalPrice) // 商品总价格
            if(len === checkNum) {
              obj.isAllCheck = true
            } else {
              obj.isAllCheck = false
            }
            return obj
        },
        renderAll:function (data) {
            if(data.len) {
                $emptyCart.hide()
                $fullCart.show()
            }else {
                $emptyCart.show()
                $fullCart.hide()
            }
            if(data.isAllCheck){
                $checkAll.prop('checked',true)
            }else {
                $checkAll.prop('checked',false)
            }
            $('#cartBadge').triggerHandler('change.cartBadge',[data.allNum])
            $needTotal.text(data.totalPrice)
            $goodsTotal.text(data.totalPrice)
        }
	  }
    })()
    page.init()
})
</script>`) %>